<template>
  <div>
    <div class="form-edit-btns"><el-button type="primary" size="mini" icon="el-icon-plus" @click="showAddView">添加图书</el-button></div>
    <el-main style="padding-left: 0px;padding-top: 0px">
      <div class="table-box">
        <el-table :data="objs" v-loading="tableLoading" border stripe @selection-change="handleSelectionChange" size="mini" style="width: 100%">
          <el-table-column type="selection" align="left"></el-table-column>

          <el-table-column header-align="center" label="封面" width="200">
            <template slot-scope="scope">
              <img :src="scope.row.cover_url" class="avatar" />
            </template>
          </el-table-column>

          <el-table-column prop="name" label="名称"></el-table-column>

          <el-table-column prop="points" label="需要积分"></el-table-column>

          <el-table-column prop="introduction" label="介绍"></el-table-column>

          <el-table-column prop="detail" label="详情"></el-table-column>

          <el-table-column prop="current_num" label="当前库存"></el-table-column>

          <el-table-column prop="total_num" label="总库存"></el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="showEditView(scope.row)" type="text" size="mini">编辑</el-button>
              <el-button type="text" size="mini" @click="deleteObj(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination background :page-size="10" :current-page="currentPage" @current-change="currentChange" layout="prev, pager, next" :total="totalCount"></el-pagination>
        <div class="form-edit-btns" style="float:right">
          <el-button type="danger" size="mini" v-if="objs.length > 0" :disabled="multipleSelection.length == 0" @click="deleteMany">批量删除</el-button>
        </div>
      </div>
    </el-main>

    <el-form :model="obj" :rules="rules" ref="addForm" style="margin: 0px;padding: 0px;">
      <div style="text-align: left">
        <el-dialog :title="dialogTitle" style="padding: 0px;" :close-on-click-modal="false" :visible.sync="dialogVisible" width="77%">
          <el-row>
            <el-form-item label="名称:" prop="name"><el-input prefix-icon="el-icon-edit" v-model="obj.name" size="mini" placeholder="请输入名称"></el-input></el-form-item>

            <el-form-item label="积分:" prop="points"><el-input v-model.number="obj.points"></el-input></el-form-item>

            <el-form-item label="封面:">
              <el-upload class="avatar-uploader" action="/file/upload" name="fileData" :on-success="handleUploadSuccess" :multiple="false" :show-file-list="false">
                <img v-if="obj.cover_url" :src="obj.cover_url" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>

            <el-form-item label="介绍" prop="introduction"><el-input type="textarea" v-model="obj.introduction"></el-input></el-form-item>

            <el-form-item label="详情" prop="detail"><el-input type="textarea" v-model="obj.detail"></el-input></el-form-item>

            <el-form-item label="库存:" prop="total_num"><el-input v-model.number="obj.total_num"></el-input></el-form-item>

            <el-form-item label="当前库存:" prop="total_num"><el-input v-model.number="obj.current_num"></el-input></el-form-item>
          </el-row>

          <span slot="footer" class="dialog-footer">
            <el-button size="mini" @click="cancelEidt">取 消</el-button>
            <el-button size="mini" type="primary" @click="add('addForm')">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      objs: [],
      dialogTitle: '',
      multipleSelection: [],
      totalCount: -1,
      currentPage: 1,
      dialogVisible: false,
      tableLoading: false,
      obj: {
        name: '',
        points: '',
        cover_url: '',
        introduction: '',
        detail: '',
        current_num: '',
        total_num: ''
      },
      rules: {
        name: [{ required: true, message: '必填:名称', trigger: 'blur' }],
        points: [{ required: true, message: '必填:积分', trigger: 'blur' }],
        cover_url: [{ required: true, message: '必填:封面', trigger: 'blur' }],
        introduction: [{ required: true, message: '必填:介绍', trigger: 'blur' }],
        detail: [{ required: true, message: '必填:详情', trigger: 'blur' }],
        total_num: [{ required: true, message: '必填:库存', trigger: 'blur' }],
        current_num: [{ required: true, message: '必填:当前库存', trigger: 'blur' }]
      }
    };
  },
  mounted: function() {
    this.loadObjs();
  },
  methods: {
    handleUploadSuccess(result, file) {
      this.obj.cover_url = result.url;
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    deleteMany() {
      this.$confirm('此操作将删除[' + this.multipleSelection.length + ']条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          var ids = '';
          for (var i = 0; i < this.multipleSelection.length; i++) {
            ids += this.multipleSelection[i].id + ',';
          }
          this.doDelete(ids);
        })
        .catch(() => {});
    },
    deleteObj(row) {
      this.$confirm('此操作将永久删除[' + row.name + '], 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.doDelete(row.id);
        })
        .catch(() => {});
    },
    doDelete(ids) {
      this.tableLoading = true;
      var _this = this;
      this.deleteRequest('/book/list/delete/' + ids).then(resp => {
        _this.tableLoading = false;
        if (resp && resp.status == 200) {
          var data = resp.data;
          _this.$message({ type: data.status, message: data.msg });
          _this.loadObjs();
        }
      });
    },

    currentChange(currentChange) {
      this.currentPage = currentChange;
      this.loadObjs();
    },
    loadObjs() {
      var _this = this;
      this.tableLoading = true;
      this.getRequest('/book/list/list?page=' + this.currentPage + '&size=10').then(resp => {
        this.tableLoading = false;
        if (resp && resp.status == 200) {
          var data = resp.data;
          _this.objs = data.data.arrays;
          _this.totalCount = data.data.count;
        }
      });
    },
    add(formName) {
      var _this = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.obj.id) {
            //更新
            this.tableLoading = true;
            this.postRequest('/book/list/update', this.obj).then(resp => {
              _this.tableLoading = false;
              if (resp && resp.status == 200) {
                var data = resp.data;
                _this.$message({ type: data.status, message: data.msg });
                _this.dialogVisible = false;
                _this.emptyObjData();
                _this.loadObjs();
              }
            });
          } else {
            //添加
            this.tableLoading = true;
            this.postRequest('/book/list/add', this.obj).then(resp => {
              _this.tableLoading = false;
              if (resp && resp.status == 200) {
                var data = resp.data;
                _this.$message({ type: data.status, message: data.msg });
                _this.dialogVisible = false;
                _this.emptyObjData();
                _this.loadObjs();
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    cancelEidt() {
      this.dialogVisible = false;
      this.emptyObjData();
    },
    showEditView(row) {
      //console.log(row);
      this.dialogTitle = '编辑图书';
      this.obj.name = row.name;
      this.obj.id = row.id;
      this.obj.cover_url = row.cover_url;
      this.obj.current_num = row.current_num;
      this.obj.total_num = row.total_num;
      this.obj.introduction = row.introduction;
      this.obj.detail = row.detail;
      this.obj.points = row.points;
      this.dialogVisible = true;
    },
    showAddView() {
      this.dialogTitle = '添加图书';
      this.dialogVisible = true;
      var _this = this;
    },
    emptyObjData() {
      this.obj = {
        name: ''
      };
    }
  }
};
</script>
<style scoped>
.el-dialog__body {
  padding-top: 0px;
  padding-bottom: 0px;
}

.slide-fade-enter-active {
  transition: all 0.8s ease;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
</style>
